<template>
	<view class="container">
		<navBar class="s_navBar" isBack backColor="#fff" background="transprant">
			<view class="s_nCenter" slot="center">
				<view class="s_nBg"><image :src="storeInfo.back_img"></image></view>
				<view class="s_nInput">
					<view class="s_nIcon iconfont icon-search" style="color: #fff;"></view>
					<input confirm-type="search" type="text" v-model="keyword" @confirm="searchData" placeholder="搜索我的订单" placeholder-style=" #939393;" />
				</view>
			</view>
		</navBar>
		<view class="nar-bar">
			<view class="tabs">
				<u-tabs
				name="cate_name" 
				count="cate_count" 
				:list="list" 
				:is-scroll="false" 
				:current="current" 
				@change="change"
				bg-color="rgba(0,0,0,0)"
				active-color="#fff" 
				inactive-color="#606266"
				bar-width="60"></u-tabs>
			</view>			
		</view>
	<view class="content" v-if="orderList.length">
		<view class="detail"   v-for="(item,index) in orderList" :key="index" v-show="status == item.order_status">
			<view class="detail-content">
				<view class="storeName">
					<view class="t flex">
						产品包
						<!-- <i class="iconfont icon-more"></i> -->
					</view>
					<view class="sideBarRight">
						{{order_status[item.order_status]}}
					</view>
				</view>
				<view class="top">
					<view class="left">
						<view class="t">订单编号</view>
						<view>{{item.order_code}}</view>
					</view>
					<view class="right">
						<view class="t">下单时间</view>
						<view>{{$moment(item.create_time*1000).format('yyyy-MM-DD')}}</view>
					</view>
				</view>
				<view class="product" v-for="(item1,index1) in item.product_list" :key="index1">
					<image :src="item1.main_imgurl.path" mode="" class="product-img"></image>
					<view class="product-info">
						<view class="info-box">
							<view class="info omit-2">
								{{item1.product_title}}
							</view>
							<text class="price">￥{{item1.price}}</text>
						</view>
						
						<view class="spec-box">
							<view class="specItem omit-1">
								<text v-for="(item2,index2) in item1.attr_params" :key="index2">{{item2.value}}</text>
							</view>
							<text>×{{item1.num}}</text>
						</view>
					</view>
				</view>
				<view class="price-box">
					<text class="all-left">佣金 ¥{{item.steward_commission || 0}} </text>
					<text class="all-price">总价 ¥{{item.price}} </text>
					<text class="d-price" v-if="item.deposit_status==1">已付定金 ¥{{item.deposit_price}}</text>
				</view>
				<view class="btn-box clearfix">
				<view class="btn" v-if="item.order_status==1">
					<text @click="toPaidDetail(item.id)" class="btn-text">查看详情</text>
				</view>
				<view class="btn" v-if="item.order_status==2">
					<text @click="toPaidDetail(item.id)" class="btn-text">查看详情</text>
					<text class="btn-text active" v-if="item.pintuan_status==2">{{groupStatus[item.pintuan_status]}}</text>
				</view>
				<view class="btn" v-if="item.order_status==3">
					<text @click="toPaidDetail(item.id)" class="btn-text">查看详情</text>
				</view>
				<view class="btn" v-if="item.order_status==4">
					<text @click="toPaidDetail(item.id)" class="btn-text">查看详情</text>
					<!-- <text class="btn-text" @click="toTelPhone(item.mobile)">联系买家</text> -->
				</view>
				<view class="btn" v-if="item.order_status==5">
					<text @click="toPaidDetail(item.id)" class="btn-text">查看详情</text>
					<!-- <text class="btn-text" @click="toTelPhone(item.mobile)">联系买家</text> -->
				</view>
				
			</view>
			</view>
		 </view>
		 <u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
	</view>	
		 <!-- 空空如也 -->
		 <view class="notList" v-else>
		 	<image :src="`${baseImg}/static/constr/notList.png`" mode=""></image>
		 	空空如也
		 </view>		
</view>
</template>

<script>
	export default {
		data(){
			return {
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				baseImg:this.$static,
				list: [
					{
						cate_name: '待付款'
					},{
						cate_name: '待发货'
					},{
						cate_name: '待收货',
					},{
						cate_name: '已完成'
					},{
						cate_name: '已关闭'
					}, 
				],
				order_status: {
					1: "待付款",
					2: "待发货",
					3: "待收货",
					4: "已完成",
					5: "已关闭"
				},
				groupStatus:{
					1:'拼团中',
					2:'拼团成功',
					3:'拼团失败'
				},
				 current: 0,
				 status:1,
				 orderList:[],
				 sid:null,
				 search:'',
				 page:1,
				 pagesize:10,
				 keyword:'',
				 moduleType:uni.getStorageSync('moduleType'), //超级管家类型 1-超级管家，2-超级政委，3-超级精英
			};
		},
		onLoad(options) {
			this.sid = this.$store.state.index.sid
			this.current = options.status?Number(options.status)-1:0
			this.status = options.status?options.status:1
			this.getOrderList()
		},
		onReachBottom() {
			this.page++;
			this.statusLoading = 'loading'
			let params = {
				status:this.status,
				keyword: this.keyword,
				page: this.page,
				pagesize: this.pagesize,
			}
			this.$api.getProductOrderList(params).then(res=>{
				console.log(res,'订单列表')
				if(res.code==1){
					if(!res.data.length){
						this.statusLoading = 'nomore'
					}else{
						this.statusLoading = 'loading'
					}
					this.orderList = this.orderList.concat(res.data)
				}
			})
		},
		onShow(){
			//this.getOrderList()
		},
		methods:{
			// 获取订单列表o
			getOrderList(){
				this.page = 1
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					status:this.status,
					keyword: this.keyword,
					page: this.page,
					pagesize: this.pagesize,
				}
				this.$api.getPackOrderList(params).then(res=>{
					console.log(res,'订单列表')
					if(res.code==1){
						if(res.data.length<10){
							this.statusLoading = 'nomore'
						}
						this.orderList = res.data?res.data:[]
					}
				})
				uni.hideLoading()
			},
			
			// 搜索
			searchData(){
				this.getOrderList()
			},
			
			// 联系买家
			toTelPhone(mobile){
				console.log(mobile,'打电话电话')
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: mobile, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				  });
			},
			
			// 线下收款
			toCollection(order_code){
				uni.scanCode({
				    success: function (res) {
						console.log(res,'二维码')
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						console.log('路径',res.path);
						if(!res.path && res.result){
							let info = {
								verificationCode:res.result,
								order_no:order_code
							}
							let data = encodeURIComponent(JSON.stringify(info))
							uni.navigateTo({
								url:`/pages_admin/home/collection/collection?data=${data}&type=shop`
							})
						}else{
							uni.showToast({
								title:'无效二维码',
								icon:'none'
							})
						}
				    },
					fail(res) {
						console.log(res,'扫码失败')
					},
				});
			},
			
			// 跳转待付款详情
			toPaidDetail(id){
				uni.navigateTo({
					url:'details?order_id='+id
				})
			},
			// 跳转到待发货详情
			toWaitSend(id){
				uni.navigateTo({
					url:'waitSendDetail?order_id='+id
				})
			},
			// 跳转到待收货详情
			toReceiv(id){
				uni.navigateTo({
					url:'receivDetail?order_id='+id
				})
			},
			// 跳转到已完成详情
			toIsOk(id){
				uni.navigateTo({
					url:'isOk?order_id='+id
				})
			},
			// 跳转到已关闭详情
			toClose(id){
				uni.navigateTo({
					url:'isClose?order_id='+id
				})
			},
			
			// 取消订单按钮
			cancel_Order(id){
				uni.showModal({
					content:'确定关闭此订单吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								order_id:id,
								store_id:this.sid
							}
							this.$api.toCancelOrder(params).then(res=>{
								console.log(res,'取消订单')
								if(res.code==1){
									uni.showToast({
										title:'关闭成功',
										icon:'success'
									})
									setTimeout(function(){
										this.getOrderList()
									},300)
								}
							})
						}
					}
				})
			},
			
			// 删除订单
			del_Order(id){
				uni.showModal({
					content:'确定要删除此订单吗？',
					success:res=>{
						if(res.confirm){
							let store_id = this.$store.state.index.sid
							this.$api.toDelOrder({id_lst:id,store_id}).then(res=>{
								console.log(res,'删除订单结果')
								if(res.code==1){
									this.getOrderList()
									uni.showToast({
										title:'删除成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 确认发货按钮
			toDeliver(id){
				uni.navigateTo({
					url:'deliverSet?order_id='+id
				})
			},
			
			change(index) {
				if(index===5){
					console.log(index)
					uni.navigateTo({
						url:'/pagesFour/home/orderAftersale/index'
					});
					return false;
				}
				this.current = index;
				this.status = Number(index+1)
				this.getOrderList()
			},
		}
	}
</script>

<style lang="less" scoped>
.container{
   height: 100%;
   padding-top: 280rpx;
   
   // 导航栏
   .s_navBar {position: absolute;top: 0;left: 0; z-index: 10;
   	.s_nCenter {width: 100%;}
   	.s_nBg {width: 100vw;background: rgba(255,255,255,0.1);position: fixed;top: 0;left: 0;z-index: -1;filter: blur(1px);}
   	.s_nInput {color: #939393;width: 400rpx;height: 66rpx;border: 2rpx solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.1);padding: 0 64rpx;border-radius: 36rpx;position: relative;
   		& > input {height: 100%;font-size: 24rpx;}
   	}
   	.s_nIcon {width: 28rpx;height: 28rpx;line-height: 28rpx;color: #939393;font-size: 28rpx;position: absolute;top: 50%;left: 28rpx;margin-top: -14rpx;}
   }
.nar-bar{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	height: 270rpx;
	width: 100%;
	background: url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
	.icon-fanhui{
		color: #fff;
		font-size: 38rpx;
		margin-right: 35rpx;
	}
	.search-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 28rpx;
		padding-top: 50rpx;
	}
	.search{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 422rpx;
		height: 66rpx;
		border: 1px solid #FFFFFF;
		opacity: 0.5;
		// background: rgba(52,58,66,.5);
		border-radius: 34rpx;
		input{
			width: 82%;
			height: 100%;
			color: #FFFFFF;
		}
		.icon-sousuo{
			color: #FFFFFF;
			margin-left: 28rpx;
			
		}
	}
	.tabs{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 10rpx;
		// margin-top: 55rpx;
	}
}
.content{
	padding: 40rpx 24rpx;
	margin-bottom: 40rpx;
	padding-bottom: constant(safe-area-inset-bottom);	padding-bottom: env(safe-area-inset-bottom);
	.detail{
		.detail-content{
			border-radius: 16rpx;
			background-color: #fff;
			padding: 30rpx 24rpx;
			margin-bottom: 24rpx;
			.storeName{
				display: flex;
				align-items: center;
				justify-content:space-between;
				.t{
					align-items:center;
				}
				.sideBarRight{
					color:#E86F12;
				}
			}
			.top{
				padding:28rpx 28rpx 28rpx 0;
				background: #F8F8F8;
				opacity: ;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #505050;
				.t {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 36rpx;
					color: #A0A0A0;
				}
				.r{
					text-align: right;
				}
			}
			.product {
				display: flex;
				justify-content: space-between;
				// padding-bottom: 45rpx;
				padding-top: 22rpx;
				.product-img {
					width: 148rpx;
					height: 148rpx;
					background: rgba(0, 0, 0, 0);
					border-radius: 8rpx;
				}
				.product-info {
					width: 75%;
					height: 76rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #505050;
					.info-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding-bottom: 40rpx;
					}
					.info {
						width: 68%;
						height: 76rpx;
					}
					
				}
				.spec-box {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20rpx;
					color: #A0A0A0;
					display: flex;
					justify-content: space-between;
					.specItem{
						width: 364rpx;
					}
				}
			}
			.price-box {
				display: flex;
				justify-content: space-between;
				// text-align: right;
				padding: 40rpx 0 22rpx 0;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 20rpx;
				color: #878787;
				.all-left{
					margin:0 auto 0 0rpx;
				}
				.all-price{
					color:#717171;
				}
				.d-price {
					color: #252525;
					padding-left: 20rpx;
				}
			}
			.btn-box {
				&:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; }
				.more {
					float: left;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #A0A0A0;
					padding-top: 10rpx;
				}
				.btn {
					// width: 88%;
					float: right;
					display: flex;
					justify-content:space-between ;
					align-items: center;
					text {
						width: 172rpx;
						height: 64rpx;
						margin-left: 20rpx;
						background: #FFFFFF;
						border: 2rpx solid #505050;
						opacity: 1;
						border-radius: 32rpx;
						text-align: center;
						line-height: 64rpx;
						color: #505050;
						font-size: 26rpx;
					}
					.active{
						background-color:#dfb368;
						color: #fff;
						border-color: #dfb368;
					}
				}
				
			}
		}
	}
}

	
	// 没有数据
	.notList{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 426rpx;
		image{
			width: 426rpx;
			height: 356rpx;
			margin-bottom: 40rpx;
		}
		font:500 40rpx/56rpx PingFang SC;
		color: #333;
	}
	.flex{
		display:flex
	}
}
</style>

